<script setup>

import {ref,reactive} from "vue"
import axios from "axios"

let dataList=reactive({data:false})
let rowspan=ref(2)
let total_dealNum=ref(0)
let total_selfDealNum=ref(0)
let total_directReply=ref(0)
let total_agreeNum=ref(0)
let total_agreeNumB=ref(0)
let total_returnNum=ref(0)
let total_returnNumB=ref(0)
let total_workOrderType0=ref(0)
let total_workOrderType1=ref(0)
let total_workOrderType2=ref(0)


let rowspan2=ref(2)
let total_dealNum2=ref(0)
let total_selfDealNum2=ref(0)
let total_directReply2=ref(0)
let total_agreeNum2=ref(0)
let total_agreeNumB2=ref(0)
let total_returnNum2=ref(0)
let total_returnNumB2=ref(0)
let total_workOrderType02=ref(0)
let total_workOrderType12=ref(0)
let total_workOrderType22=ref(0)

axios({
url:"http://172.20.35.148:8888/get",
method:"GET"
}).then((res)=>{
dataList.data=res.data.data

for (let index = 0; index < res.data.data.length; index++) {
    if(res.data.data[index].managerType){
      rowspan.value++
      total_dealNum.value+=res.data.data[index].dealNum
      total_selfDealNum.value+=res.data.data[index].selfDealNum
      total_directReply.value+=res.data.data[index].directReply
      total_agreeNum.value+=res.data.data[index].agreeNum
      total_agreeNumB.value+=res.data.data[index].agreeNum/(res.data.data[index].dealNum+res.data.data[index].selfDealNum+res.data.data[index].directReply)
      total_returnNumB.value+=res.data.data[index].returnNum/(res.data.data[index].dealNum+res.data.data[index].selfDealNum+res.data.data[index].directReply)
      total_returnNum.value+=res.data.data[index].returnNum
      total_workOrderType0.value+=res.data.data[index].workOrderType0
      total_workOrderType1.value+=res.data.data[index].workOrderType1
      total_workOrderType2.value+=res.data.data[index].workOrderType2
    }
    if(!res.data.data[index].managerType){
      rowspan2.value++
      total_dealNum2.value+=res.data.data[index].dealNum
      total_selfDealNum2.value+=res.data.data[index].selfDealNum
      total_directReply2.value+=res.data.data[index].directReply
      total_agreeNum2.value+=res.data.data[index].agreeNum
      total_agreeNumB2.value+=res.data.data[index].agreeNum/(res.data.data[index].dealNum+res.data.data[index].selfDealNum+res.data.data[index].directReply)
      total_returnNumB2.value+=res.data.data[index].returnNum/(res.data.data[index].dealNum+res.data.data[index].selfDealNum+res.data.data[index].directReply)
      total_returnNum2.value+=res.data.data[index].returnNum
      total_workOrderType02.value+=res.data.data[index].workOrderType0
      total_workOrderType12.value+=res.data.data[index].workOrderType1
      total_workOrderType22.value+=res.data.data[index].workOrderType2
    }

}
console.log(res.data.data)
})

</script>

<template>
  <div v-if="dataList.data">
 <table width="100%" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td align="center" class="title" height="60">受理员业务统计表</td>
    </tr>
    <tr>
      <td align="right" height="25">2017-01-02---2017-05-02</td>
    </tr>
  </table>

  <table class="table_top" width="100%" border="0" cellspacing="1" cellpadding="4" >
    <tr class="title_font">
      <td colspan="2" class="bgtd" rowspan="2">受理员</td>
      <td width="10%" class="bgtd" rowspan="2">受理数</td>
      <td width="10%" class="bgtd" rowspan="2">自办数</td>
      <td width="10%" class="bgtd" rowspan="2">直接解答</td>
      <td colspan="2" class="bgtd">拟办意见</td>
      <td colspan="2" class="bgtd">返回修改</td>
      <td colspan="3" class="bgtd">工单类型</td>
    </tr>
    <tr>
      <td width="8%" class="bgtd">同意</td>
      <td width="8%" class="bgtd">比例</td>
      <td width="8%" class="bgtd">数量</td>
      <td width="8%" class="bgtd">比例</td>
      <td width="8%" class="bgtd">建议件</td>
      <td width="8%" class="bgtd">诉求件</td>
      <td width="8%" class="bgtd">咨询件</td>
    </tr>
    <tr>
      <td width="7%" :rowspan="rowspan" class="bgtd1">受理处</td>
    </tr>
    <tr v-for="(item, index) in dataList.data" :key="index" v-show="item.managerType">
      <td width="7%" class="bgtd2">{{ item.managerName }}</td>  
      <td>{{item.dealNum}}</td>
      <td>{{item.selfDealNum}}</td>
      <td>{{item.directReply}}</td>
      <td>{{item.agreeNum}}</td>
      <td>{{(item.agreeNum/(item.dealNum+item.selfDealNum+item.directReply)).toFixed(2) }}</td>
      <td>{{item.returnNum}}</td>
      <td>{{(item.returnNum/(item.dealNum+item.selfDealNum+item.directReply)).toFixed(2)}}</td>
      <td>{{item.workOrderType0}}</td>
      <td>{{item.workOrderType1}}</td>
      <td>{{item.workOrderType2}}</td>
    </tr>
    
    <tr>
      <td class="bgtd2">总计</td>
      <td class="bgtd2">{{total_dealNum}}</td>
      <td class="bgtd2">{{total_selfDealNum}}</td>
      <td class="bgtd2">{{total_directReply}}</td>
      <td class="bgtd2">{{total_agreeNum}}</td>
      <td class="bgtd2">{{total_agreeNumB.toFixed(2)}}</td>
      <td class="bgtd2">{{total_returnNum}}</td>
      <td class="bgtd2">{{total_returnNumB.toFixed(2)}}</td>
      <td class="bgtd2">{{total_workOrderType0}}</td>
      <td class="bgtd2">{{total_workOrderType1}}</td>
      <td class="bgtd2">{{total_workOrderType2}}</td>
    </tr>
    <tr>
      <td width="7%" :rowspan="rowspan2" class="bgtd1"  >话务组</td>
      
     
    </tr>
    <tr v-for="(item, index) in dataList.data" :key="index" v-show="!item.managerType">
      <td width="7%" class="bgtd2">{{ item.managerName }}</td>
      <td>{{ item.dealNum }}</td>
      <td>{{ item.selfDealNum }}</td>
      <td>{{ item.directReply }}</td>
      <td>{{item.agreeNum}}</td>
      <td>{{(item.agreeNum/(item.dealNum+item.selfDealNum+item.directReply)).toFixed(2) }}</td>
      <td>{{item.returnNum}}</td>
      <td>{{(item.returnNum/(item.dealNum+item.selfDealNum+item.directReply)).toFixed(2)}}</td>
      <td>{{item.workOrderType0}}</td>
      <td>{{item.workOrderType1}}</td>
      <td>{{item.workOrderType2}}</td>
    </tr>
    
    <tr>
      <td class="bgtd2">总计</td>
      <td class="bgtd2">{{total_dealNum2}}</td>
      <td class="bgtd2">{{total_selfDealNum2}}</td>
      <td class="bgtd2">{{total_directReply2}}</td>
      <td class="bgtd2">{{total_agreeNum2}}</td>
      <td class="bgtd2">{{total_agreeNumB2.toFixed(2)}}</td>
      <td class="bgtd2">{{total_returnNum2}}</td>
      <td class="bgtd2">{{total_returnNumB2.toFixed(2)}}</td>
      <td class="bgtd2">{{total_workOrderType02}}</td>
      <td class="bgtd2">{{total_workOrderType12}}</td>
      <td class="bgtd2">{{total_workOrderType22}}</td>
    </tr>
  </table>
</div>
</template>

<style scoped>
     body {
      font-family: 微软雅黑;
    }

    .table_top {
      text-align: center;
      margin-top: 13px;
      background-color: #cccccc;
    }

    .table_top td {
      background-color: #ffffff;
      height: 25px;
      line-height: 150%;
    }

    
    .bgtd {
      text-align: center;
      background: #e9faff !important;
    }



    .title {
      font-size: 26px;
      font-weight: bold;
      border-bottom: 1px dashed #CCCCCC;
      color: #255e95;
    }

    .title_font {


      font-size: 16px;
      font-weight: bold;
      /* color: #255e95; */
      color: black;
      background-color: #e9faff;
    }

    .bgtd1 {
      text-align: center;
      background: #f2fbfe !important;
    }

    .bgtd2 {
      text-align: center;
      background: #f3f3f3 !important;
    }
    
    
    
    
    </style>